Shared header ,footer and sidebar layout

1. create Header component

create Header.tsx in components folder

import Link from 'next/link';

const path = [
  { uid: 21, name: ' Home', id: 1, path: '/' },
  { uid: 31, name: 'Blog', id: 2, path: 'Blog' },
  { uid: 41, name: 'About', id: 3, path: 'About' }
];
export default function Header() {
  return (
   
      <nav>
        <ul>
          {path.map((value) => {
            return (
              <li key={value.uid}>
                <Link href={value.path}>
                  <a> {value.name} </a>
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>
   
  );
}

2. Use the Header component in view page - home.tsx

import Header from "./components/Header";

export default function Home() {
    return (    
            
              <div > 
                    <h1>Home</h1> 

                    <Header />
              </div>
            
    )
}

3. create Sidebar component

create Sidebar.tsx in components folder

export default function Sidebar() {
  return (
    <aside >
      <h2> Sidebar</h2>
      <div >
        <p> JavaScript </p>
        <p> Python </p>
        <p> HTML </p>
        <p> CSS </p>
      </div>
    </aside>
  );
}

4. Use the Sidebar component in view page - home.tsx

import Header from "./components/Header";
import Sidebar from "./components/Sidebar";

export default function Home() {
    return (    
            
              <div >  
                     <h1>Home</h1>  

                     <Header />                               
                     <Sidebar />
              </div>
            
    )
}

5. Use the Sidebar component in another view page - contact.tsx

import Header from "./components/Header";
import Sidebar from "./components/Sidebar";

export default function Home() {
    return (    
            
              <div >  
                     <h1>Contact Us</h1>  
                     
                     <Header />                               
                     <Sidebar />
              </div>
            
    )
}